<template>
	<view>
		<u-navbar ref="navbar" leftIcon="" placeholder="">
			<view slot="left" class="font-30 color ml-30" @click="back">返回</view>
		</u-navbar>

		<view class="box">
			<view class="box_title color">绑定手机号</view>
			<view class="font-36 box_text">您好，欢迎来到响当当当</view>
			<u-gap height="60rpx"></u-gap>
			<view class="box_input">
				<view>手机号：</view>
				<u-input placeholder="请输入手机号" type="number" :maxlength="11" border="none" v-model="phone"
					fontSize="30rpx" color="#333" placeholderStyle="fontSize: 30rpx; color: #999;"></u-input>
			</view>
			<view class="box_input relative">
				<text @tap.stop="sendCode" class="codeText absolute">{{codeText}}</text>
				<view>验证码：</view>
				<u-input placeholder="请输入验证码" type="number" :maxlength="6" border="none" v-model="code" fontSize="30rpx"
					color="#333" placeholderStyle="fontSize: 30rpx; color: #999;"></u-input>
			</view>
		</view>



		<!-- #ifndef MP-WEIXIN -->
		<view class="agreement flex-c">
			<u-checkbox-group v-model="checked" @change="change">
				<u-checkbox name="agree" size="24rpx" activeColor="#ff820d" :checked="isAgree"></u-checkbox>
			</u-checkbox-group>
			<view class="font-24 color-9">
				<text>登录即同意响当当的</text>
				<text class="ml-10" style="text-decoration: underline;"
					@tap="$common.routeJump(1, 'login/userAgreement')">&laquo;用户协议&raquo;</text>
			</view>
		</view>
		<!-- #endif -->

		<view class="button login" @tap="$u.throttle(toLogin, 1000)">登录</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		sendCode,
		bindPhone
	} from '@/config/api.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				codeText: '发送验证码',
				checked: [{
					name: 'agree',
					disabled: false
				}],
				isAgree: true,
				place: {
					fontSize: '30rpx',
					color: '#333333'
				},

				openid: ''
			};
		},
		onLoad(op) {
			if (op && op.openid) {
				this.openid = op.openid
			}
		},
		methods: {
			...mapMutations(['saveUserInfo', 'saveToken']),
			back() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			sendCode() {
				if (!this.phone || !uni.$u.test.mobile(this.phone)) return this.$refs.uToast.show({
					message: '请输入正确的手机号'
				})
				if (this.codeText != '发送验证码') return
				uni.showLoading({
					title: '发送中...'
				})
				sendCode({
					mobile: this.phone,
					event: 'changemobile',
				}).then(res => {

					uni.hideLoading()
					if (res.code === 1) {
						this.$refs.uToast.show({
							message: '发送成功'
						})
						let current = 60
						this.codeText = `${current--}s`
						let timer = setInterval(() => {
							this.codeText = `${current--}s`
							if (current < 0) {
								this.codeText = '发送验证码'
								clearInterval(timer)
							}
						}, 1000)
					} else {
						uni.hideLoading()
						console.log(res)
						this.$refs.uToast.show({
							message: '请重试'
						})
					}
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					this.$refs.uToast.show({
						message: '发送失败，请重试'
					})
				})
			},
			toLogin() {
				bindPhone({
					openid: this.openid,
					mobile: this.phone,
					captcha: this.code
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.saveUserInfo(res.data.userinfo)
						this.saveToken(res.data.userinfo.token)
						uni.reLaunch({
							url: '/pages/my/my'
						})
					}
				})
			}
		},
		computed: {
			...mapState(['userInfo']),

		},
	}
</script>

<style lang="scss">
	.box {
		padding: 60rpx;
		margin-top: 20rpx;

		.box_title {
			font-size: 54rpx;
			font-weight: bold;
		}

		.box_text {
			font-weight: bold;
			color: #BFBFBF;
			margin-top: 40rpx;
		}

		.box_input {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 30rpx 4rpx;
			margin-top: 30rpx;

			view {
				margin-right: 40rpx;
				font-size: 30rpx;
				color: #666666;
			}

			.codeText {
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				font-size: 26rpx;
				font-weight: bold;
				color: #ff820d;
				z-index: 2;
				display: inline-block;
				min-width: 130rpx;
				text-align: center;
			}
		}
	}

	.color {
		color: #373737;
	}

	.login {
		background: #ff820d;
		border-radius: 200rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		padding: 30rpx 0;
		margin: 60rpx 50rpx 0;
		text-align: center;
	}

	.other {
		position: fixed;
		bottom: 120rpx;
		left: 0;
		width: 100%;

		.other_top_line {
			width: 100%;
			height: 1rpx;
			background: #EAEAEA;
			flex: 1;
			margin: 0 20rpx;
		}

		.icon_bg {
			background: #ff820d;
			width: fit-content;
			padding: 15rpx;
			border-radius: 50%;
			margin: 0 auto;
		}
	}

	.agreement {
		width: 100%;
		position: fixed;
		bottom: 28rpx;
		left: 0;
	}

	.wxbox {
		padding: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wxbtn {
		color: #fefefe;
		text-align: center;
		width: 410rpx;
		line-height: 60rpx;
		background-color: #00b2bc;
		border-radius: 7rpx;
		margin-bottom: 30rpx;
	}

	.wxquit {
		color: #666666;
		text-align: center;
		width: 410rpx;
		line-height: 60rpx;
		background-color: #ededed;
		border-radius: 7rpx;
	}
</style>